<template>
	<view class="payment-page">
		<view class="pay-box">
			<view class="title">
				报告金额
			</view>
			<view class="cur-price flex-r s-b a-c mt-2">
				<text>现价</text>
				<view class="flex-r a-c"> <text class="iconfont-color icon-xunxunbi" />{{currentPrice}} </view>
			</view>
			<view class="coupon flex-r s-b a-c mt-2">
				<text class="flex-r a-c"> <text class="iconfont-color icon-wodekajuan" /> 卡券</text>
				<view class="flex-r a-c">无可用卡券 <text class="iconfont icon-zuozuo" /> </view>
			</view>
		</view>
		<view class="pay-box mt-1">
			<view class="title">
				报告金额
			</view>
			<view class="pay-mode mt-2">
				<up-radio-group v-model="paymentMode" placement="column" iconPlacement="right">
					<view class="flex-r a-c">
						<text class="iconfont-color icon-zhifubao" />
						<up-radio activeColor="#FF9281" :name="1" label="支付宝" />
					</view>
					<view class="flex-r a-c">
						<text class="iconfont-color icon-weixin" />
						<up-radio activeColor="#FF9281" :name="2" label="微信" />
					</view>
					<view class="flex-r a-c">
						<text class="iconfont-color icon-xunxunbi" />
						<up-radio activeColor="#FF9281" :name="3" :label="`循循币 (余额:${xunBalance})`" />
					</view>
				</up-radio-group>
			</view>
		</view>
		<view class="submit">
			<view class="agreement flex-r a-c">
				<up-radio activeColor="#FF9281" label="阅读并同意" />
				<text>《循循币充值协议》</text>
			</view>
			<view class="pay-btn flex-r s-b mt-1">
				<text>合计：￥9.9</text>
				<button class="button-active" @click="handlePay">立即支付</button>
			</view>
		</view>
	</view>
	<up-popup :show="showTopUp">
		<view class="top-up">
			<view class="title flex-r s-b a-c">
				<text>充值</text>
				<up-icon name="close-circle-fill" @click="showTopUp = false" />
			</view>
			<view class="mt-1">
				<template v-for="i in [1,2]" :key="i">
					<view class="flex-r s-b mb-1">
						<view class="virtual-coin flex-c a-c j-c">
							<view class="flex-r a-c">
								<text class="iconfont-color icon-xunxunbi" />
								4
							</view>
							<text>￥6.00</text>
						</view>
						<view class="virtual-coin flex-c a-c j-c">
							<view class="flex-r a-c">
								<text class="iconfont-color icon-xunxunbi" />
								18
							</view>
							<text>￥25.00</text>
						</view>
						<view class="virtual-coin flex-c a-c j-c">
							<view class="flex-r a-c">
								<text class="iconfont-color icon-xunxunbi" />
								56
							</view>
							<text>￥68.00</text>
						</view>
					</view>
				</template>
				<view class="tips flex-r s-b a-c mt-1 mb-1">
					<view class="flex-r a-c">
						余额
						<text class="iconfont-color icon-xunxunbi" />
						{{xunBalance}}
					</view>
					<view class="flex-r a-c">
						需充值
						<text class="iconfont-color icon-xunxunbi" />
						{{currentPrice - xunBalance}}
					</view>
				</view>
			</view>
			<view class="submit">
				<view class="agreement flex-r a-c">
					<up-radio activeColor="#FF9281" label="阅读并同意" />
					<text>《循循币充值协议》</text>
				</view>
				<button class="button-active mt-1" @click="handlePay2">立即支付</button>
			</view>
			<up-toast ref="uToastRef" />
		</view>
	</up-popup>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const paymentMode = ref('1')
	const radioChange = (val) => {
		console.log(val);
	}
	const groupChange = (val) => {
		console.log(val);
	}
	// 充值功能
	const showTopUp = ref(false)
	// 现价
	const currentPrice = ref(9.9)
	// 循循币余额
	const xunBalance = ref(0)
	const handlePay = () => {
		if (xunBalance.value < currentPrice.value) {
			showTopUp.value = true
		}
	}
	// 
	const handlePay2 = () => {
		if (xunBalance.value < currentPrice.value) {
			showToast()
		}
	}

	const uToastRef = ref(null)
	let params = {
		type: 'error',
		icon: false,
		title: '失败主题',
		message: "余额不足，请充值",
		iconUrl: 'https://uview-plus.jiangruyi.com/resources/toast/error.png'
	}
	const showToast = () => {
		uToastRef.value.show({
			...params,
			complete() {
				params.url && uni.navigateTo({
					url: params.url
				});
			}
		});
	}
</script>

<style lang="scss">
	.payment-page {
		padding: 40rpx 20rpx 0;

		.pay-box {
			background: #F9F9F9;
			border-radius: 20rpx;
			padding: 30rpx 40rpx;

			.title {
				font-weight: 600;
				font-size: 32rpx;
				color: #000000;
				line-height: 44rpx;
			}

			.cur-price {

				text,
				view {
					font-size: 32rpx;
				}

				.iconfont-color {
					margin-right: 10rpx;
				}
			}

			.coupon {
				text {
					font-size: 32rpx;
				}

				view {
					font-size: 28rpx;
					color: #BDBDBD;

				}
			}

			.iconfont-color {
				margin-right: 10rpx;
				font-size: 40rpx;
			}
			
			.iconfont{
				font-size: 26rpx;
			}
		}

		.submit {
			position: absolute;
			bottom: 20px;
			left: 0;
			width: 100%;
			box-sizing: border-box;
			padding: 0 40rpx;

			.agreement {
				::v-deep .u-radio__text {
					font-size: 24rpx !important;
					color: #797979 !important;

				}

				text {
					font-size: 24rpx;
					color: #FF9281;
				}
			}

			.pay-btn {
				button {
					margin: 0;
				}
			}
		}
	}

	::v-deep .u-radio-label--right {
		flex: 1;
	}

	.top-up {
		padding: 30rpx;

		.title {
			margin-bottom: 40rpx;

			text {
				font-weight: 500;
				font-size: 40rpx;
				color: #000000;
			}
		}

		.virtual-coin {
			width: 200rpx;
			height: 120rpx;
			background: #F9F9F9;
			border-radius: 20rpx;

			view {
				font-weight: 500;
				font-size: 36rpx;
				color: #000000;

				.iconfont-color {
					margin-right: 10rpx;
				}
			}

			text {
				font-size: 24rpx;
				color: #797979;
			}
		}

		.tips {
			font-size: 12px;

			.iconfont-color {
				margin-left: 10rpx;
				margin-right: 6rpx;
			}
		}

		.agreement {
			::v-deep .u-radio__text {
				font-size: 24rpx !important;
				color: #797979 !important;

			}

			text {
				font-size: 24rpx;
				color: #FF9281;
			}
		}
	}
</style>